<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 羡羡
  Date: 2021/11/3
  Time: 16:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>人生计划</title>
    <base href="${pageContext.request.getScheme()}://${pageContext.request.getServerName()}:${pageContext.request.getServerPort()}${pageContext.request.contextPath}/"/>
    <script src="/SSMLifePlan/js/jquery-1.10.2.js"></script>
    <script src="/SSMLifePlan/layui/layui.js"></script>
    <link rel="stylesheet" href="/SSMLifePlan/layui/css/layui.css">
    <style>
        #bg1 td{
            width:80px;
            height: 70px;
        }
        <c:forEach begin="1" end="${wz-1}" var="t">
        #t${t}{
            background-color:#eeeeee;
        }
        </c:forEach>
        <c:forEach begin="${wz+1}" end="1201" var="t">
        #t${t}{
            background-color:pink;
        }
        </c:forEach>
        .adcl{
            background-color: #01AAED;
        }
        #bg1{
            border-spacing: 2px;
            border-collapse:separate;
            float: left;
        }
        #moye{
            width:80px;
            height: 70px;
            background-color: white;
        }
        #d2{
            margin-top: 10px;
            width: 420px;
            margin-left: 20px;
            height: 7234px;
            float: left;
            right:5px;
            cursor: pointer;
        }
        #nn{
            width: 20px;
            margin:0 auto;
            position: relative;
            top:-30px;
            left: 20px;
        }
        #nn{
            width: 20px;
            margin:0 auto;
            position: relative;
            top:-30px;
            left: 20px;
        }

    </style>
    <script>
        $(function (){

            var did=localStorage.getItem("id");
            $("#t"+did).click();
            localStorage.clear();

            var kj=${cofli};
            var newar=[];
            //循环除去相同的
           for(var p=0;p<kj.length;p++){
               if(newar.indexOf(kj[p])===-1){
                   newar.push(kj[p]);
               }
           }
           //循环标点
           for(var j=0;j<newar.length;j++){
               $("#t"+newar[j]).append("<span class='layui-badge-dot layui-bg-green'></span>");
           }
        });

        //点击数字事件
        function dj(lid,liyear,limo){
            $.ajax({
                url:'life/${uid}/'+lid,
                type: 'GET',
                contentType: 'application/json',
                success: function(data){
                    var th='';
                    //循环遍历
                    for(var i=0;i<data.data.length;i++){
                        var cf=data.data[i];
                        th+="<div class='layui-collapse'  style='margin-bottom: 10px'>" +
                            "<div class='layui-colla-item'>" +
                            "<h2  class='layui-colla-title'>"+liyear+"年"+cf.logtime+"</h2>" +
                            "<div class='layui-colla-content'>"+cf.context+"</div>" +
                            "<a style='margin-left:360px;margin-bottom: 10px;margin-top:10px;' class='layui-btn layui-btn-danger layui-btn-xs' onclick='del("+cf.id+")' lay-event='del'>删除</a>" +
                            "</div>" +
                            "</div>";
                    }
                    //拼接 1-9 + 0=01-09
                    if(limo<10){
                        limo="0"+limo;
                    }
                    $("#nn").html(liyear+"年"+limo+"月"+"<a class='layui-btn layui-btn-xs' style='margin-left: 15px' onclick='add("+liyear+","+limo+","+lid+")' lay-event='edit'>添加美好记录</a>");
                    $("#d3").html(th);
                    //从新渲染 解决无图标 折叠无效
                    layui.use('element', function(){
                        var element = layui.element;
                        element.render('collapse'); //重新对导航进行渲染。
                    });
                }
            })
        }

        //删除
        function del(id){
            layer.confirm('确认删除嘛？',{
                offset: ['300px', '580px']
                }
                ,function(index){
                $.ajax({
                    url:'life/'+id,
                    type:'delete',
                    data: {
                        "_method": "delete"
                    },
                    contentType:'application/json',
                    success:function(da){
                        if(da.code==200){
                            layer.msg("删除成功！",{
                                offset:['300px', '580px']
                            });
                            location.reload ();
                        }else{
                            layer.msg("删除失败！",{
                                offset:['300px', '580px']
                            });
                        }
                    }
                })
            });
        }

        //计算某年某月的最后一天
        function getla(year,moth){
            var new_year=year;
            var new_moth=moth++;
            if(moth>12){
                new_moth-=12;
                new_year++;
            }
            var newda=new Date(new_year,new_moth,1);
            return (new Date(newda.getTime()-1000*60*60*24)).getDate();
        }

        //富文本
        var index="";
        var layedit="";
        layui.use('layedit', function(){
            layedit = layui.layedit
            //此时不要去build
        });

        //添加
        function add(ye,mo,ld){
            layer.open({
                type : 1,
                title : ye+'年'+mo+'月',
                offset:['145px','410px'],
                area : [ '700px', '450px' ],//宽高
                shadeClose : true, //点击遮罩关闭
                content : $('#df2'),
                success: function(){
                    //layui富文本渲染
                    index=layedit.build('demo', {
                        height: 180, //设置编辑器高度
                        //设置富文本工具栏
                        tool:['strong','italic','underline','del','|','left','center','right']
                    });
                    //点击添加美好纪录
                    $("#tj").attr("onclick","tcadd("+ld+")");
                }
            });

            //日期
            var lastday=getla(ye,mo);
            layui.use('laydate', function() {
                var laydate = layui.laydate;
                //常规用法
                laydate.render({
                    elem: '#test1'
                    ,showBottom: false
                    ,min:ye+"-"+mo+"-"+"1"
                    ,max:ye+"-"+mo+"-"+lastday
                    ,done: function(value, date, endDate){//改变日期执行回调
                        var time=value;
                        $("#test1").val(time);
                    }
                });
            });
        }

        //弹出层关闭按钮
        function czk(){
            layer.closeAll();
        }
        //添加
        function tcadd(cf){
            //得到日期
            var rq=$("#test1").val();
            //得到文本
            var nr=layedit.getText(index);
            //用户文本
            var uid=${sessionScope.uid};
            if(rq=='' || nr==''){
                layer.msg("不能为空！",{
                    offset:['350px', '700px']
                })
            }else{
                $.ajax({
                    url:'life'
                    ,type:'post'
                    ,data:{
                        "usid":uid,
                        "logtime":rq,
                        "context":nr,
                        "location":cf
                    },
                    success:function (data) {
                        if(data.code==200){
                            localStorage.setItem("id",data.data);
                            layer.closeAll();
                            layer.msg("添加成功！",{
                                offset:['300px', '580px']
                            });
                            //刷新
                            location.reload ();
                        }else{
                            layer.msg("添加失败！",{
                                offset:['300px', '580px']
                            });
                        }
                    }
                })
            }
        }

        //头像预览
        function fils(){
            $("#file").click();
        }
        function wj(ev){
            var sr=document.getElementById("tp");
            //获取文件对象
            let file = ev.files[0];
            //获取文件阅读器
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(){
                //给img的src设置图片url
                sr.setAttribute("src", this.result);
            }
        }

        //头像上传
        function jqfile(){
            var formData = new FormData();
            formData.append('multipart', $('#file')[0].files[0]);
            $.ajax({
                url: 'fileup',
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                dataType : 'json',
                success: function(res){
                    $("#tp").attr("src",res.data);
                    alert("更改成功！");
                }
            });
        }
    </script>
</head>
<body>
<!--  <span class="layui-badge-dot layui-bg-green"></span>-->
<table id="bg1" style="text-align: center">
    <c:forEach begin="1" end="101" var="t">
        <tr>
            <td id="moye">${year-1+t}</td>
            <c:choose>
                <c:when test="${t==1}">
                    <c:forEach begin="${moth}" end="12" var="h">
                        <c:choose>
                            <c:when test="${(t-1)*12+h-moth+1==wz}">
                                <td id="t${(t-1)*12+h-moth+1}" onclick="dj(${(t-1)*12+h-moth+1},${year-1+t},${h})" class="adcl">
                                    <label>${h}</label>
                                </td>
                            </c:when>
                            <c:otherwise>
                                <td id="t${(t-1)*12+h-moth+1}" onclick="dj(${(t-1)*12+h-moth+1},${year-1+t},${h})"><label>${h}</label></td>
                            </c:otherwise>
                        </c:choose>
                    </c:forEach>
                </c:when>
                <c:when test="${t==101}">
                    <c:forEach begin="1" end="${moth}" var="h">
                        <c:choose>
                            <c:when test="${(t-1)*12+h-moth+1==wz}">
                                <td id="t${(t-1)*12+h-moth+1}" class="adcl" onclick="dj(${(t-1)*12+h-moth+1},${year-1+t},${h})"><label >${h}</label></td>
                            </c:when>
                            <c:otherwise>
                                <td id="t${(t-1)*12+h-moth+1}" onclick="dj(${(t-1)*12+h-moth+1},${year-1+t},${h})"><label>${h}</label></td>
                            </c:otherwise>
                        </c:choose>
                    </c:forEach>
                </c:when>
                <c:otherwise>
                    <c:forEach begin="1" end="12" var="h">
                        <c:choose>
                            <c:when test="${(t-1)*12+h-moth+1==wz}">
                                <td id="t${(t-1)*12+h-moth+1}" class="adcl" onclick="dj(${(t-1)*12+h-moth+1},${year-1+t},${h})">
                                    <label>${h}</label>
                                </td>
                            </c:when>
                            <c:otherwise>
                                <td id="t${(t-1)*12+h-moth+1}" onclick="dj(${(t-1)*12+h-moth+1},${year-1+t},${h})">
                                    <label>${h}</label>
                                </td>
                            </c:otherwise>
                        </c:choose>
                    </c:forEach>
                </c:otherwise>
            </c:choose>
        </tr>
    </c:forEach>
</table>
<div id="d2">
    <div style="width: 200px;margin-left:120px">
        <img src="${img}" id="tp" style="width:200px;margin-bottom: 20px;height: 200px;border-radius:50%" onclick="fils()"/>
        <input type="file" name="multipart" style="display:none;" id="file" onchange="wj(this)"/>
    </div>
    <button onclick="jqfile()" style="margin-left: 200px">上传</button>
    <h2 id="nn" style="margin-top: 50px;width: 115px"></h2>
    <div id="d3">

    </div>
</div>

</body>
<!-- 添加 -->
<div style="padding: 20px; display: none" id="df2">
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">时间：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
                </div>
            </div>
        </div>
    </div>
    <textarea id="demo" style="display: none;"></textarea>
    <div class="layui-form-item" style="margin-left: 40%;margin-top: 20px;margin-bottom: 10px" id="bu3">
        <div class="layui-btn-group">
            <button class="layui-btn" id="tj" lay-submit="" lay-filter="add_submit">添&ensp;加</button>
            <button type="reset" class="layui-btn layui-btn-primary" onclick="czk()">关&ensp;闭</button>
        </div>
    </div>
</div>
</html>
